<template>
  <div class="page-common-layout">
    <div class="page-common-left" style="width:100%">
      <tool-bar @search="$refs.table.refresh(true)" @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        ">
        <template slot="toolBtn" slot-scope="scope">
          <a-button class="cu-btn-primary" icon="plus" @click="handleAdd()"
          >{{$ct("add","新增")}}
          </a-button>
        </template>
        <template slot="toolForm">
          <a-form-item :label="$ct('name','名称')">
            <a-input v-model="queryParam.name" :placeholder="$ct('name','名称')"/>
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid ref="table" :columns="columns" :url="url" :queryParam="queryParam" rowKey="uuid"  :showRowSelect="false">
        <span slot="renderStatus" slot-scope="{ text, record }">
					<a-switch size="small" :checked="text == 'true'?true:false" @change="(e) => stateChange(e,record)"/>
				</span>
        <template slot="renderAction" slot-scope="{ text, record }">
          <a @click="() => handleEdit(record)">{{$ct("edit","编辑")}}</a>
          <span class="action-margin"></span>
          <a @click="() => handleSub(record)" class="action-delete">{{$ct("delete","删除")}}</a>
          <a-dropdown>
            <a class="ant-dropdown-link">
              {{$ct("more","更多")}}
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handlePreview(record)">{{$ct("preview","预览")}}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </DataGrid>
      <!--	新增编辑	 -->
      <edit-form ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl"
                 @cancel="handleCancel()" @ok="handleOk()"/>

      <preview-form ref="previewForm" :visible="previewFormVisible" :data="jsonData" @cancel="previewFormCancel"></preview-form>
    </div>
  </div>
</template>

<script>
import {
  DataGrid
} from "@/components";
import {
  dataGridMixin
} from "@/mixins/dataGridMixin";
import editForm from "./edit.vue";
import previewForm from "../apiFlowableModel/previewForm";

const columns = [
  {
    title: "表单名称",
    dataIndex: "name",
    width: 100
  },
  {
    title: "表单编码",
    dataIndex: "code", width: 100
  },
  {
    title: "表单状态",
    dataIndex: "status",
    langCode: "FormStatus",
    width: 100,
    scopedSlots: {
      customRender: "renderStatus",
    }
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: 100,
    scopedSlots: {customRender: "renderAction"},
  },
];
export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    editForm,
    DataGrid,
    previewForm
  },
  data() {
    return {
      queryParam: {},
      columns,
      visible: false,
      confirmLoading: false,
      mdl: null,
      url: {
        getPageSet: "/workflow/actFormConfigure/getPageSet",
        save: "/workflow/actFormConfigure/save",
        update: "/workflow/actFormConfigure/update",
        deleteBatch: "/workflow/actFormConfigure/deleteBatch"
      },
      previewFormVisible:false,
      jsonData: {},
    };
  },
  methods: {
    previewFormCancel(){
      this.previewFormVisible = false;
    },
    //预览
    handlePreview(val) {
      this.previewFormVisible = true;
      this.$refs.previewForm.plugs = [];
      this.$refs.previewForm.plugs.push((resolve) => require([`@/pages${val.nodeFormPath}.vue`], resolve));
    },
    //修改状态
    stateChange(value, record) {
      event.stopPropagation()
      let param = {
        uuid: record.uuid,
        status: value
      }
      this.$post("/workflow/actFormConfigure/updateStatusByUuid", param).then((res) => {
        if (res.statusCode === 200) {
          // this.$message.success(res.message, 1.5)
          this.$refs.table.refresh()
        } else {
          this.$message.warn(res.message, 1.5)
        }
      })
    },
    // 删除
    handleSub(record, paramar) {
      const that = this
      let uuids = ''
      if (!record || record.length === 0) {
        this.$message.warn('请勾选需要删除的数据', 1.5)
        return
      } else if (record && record[0]) {
        uuids = record.toString()
      } else {
        uuids = record.uuid
      }
      let value = {
        uuid: uuids,
        ...paramar
      }
      that.$confirm({
        title: '警告',
        content: `删除后用户已填写的数据将被一并删除且无法恢复，
同时引用该组件的所有流程功能均受影响，是否确定删除！`,
        okText: '确定',
        cancelText: '取消',
        closable: true,
        icon: () => that.$createElement('a-icon', {
          props: {
            key: 'warning',
            type: 'exclamation-circle',
            twoToneColor: '#faad14'
          }
        }),
        onOk() {
          // 在这里调用删除接口
          that.$post(that.url.deleteBatch, value).then((res) => {
            if (res.statusCode === 200 || res === 1) {
              that.$message.success(res.message, 1.5)
              if (that.fetch) {
                that.fetch(that.queryParam)
              } else {
                that.$refs.table.refresh()
              }
            } else {
              that.$message.error(res.message, 1.5)
            }
          })
        },
        onCancel() {
        }
      })
    },

  },
};
</script>

<style lang="less"></style>
